<template>
  <div class="expenditure-classification">
    <menu-content-layout title="支出分类">
      <template v-slot:icon>
        <img src="~/assets/images/expenditure-classification.png" alt="" />
      </template>

      <template v-slot:content>
        <div
          v-if="$route.name === 'ExpenditureClassification'"
          class="content-list"
        >
          <div class="prompt">
            <p>
              您在入驻找包装网的{{ day }}天内，一共购买了
              <span class="keyword">{{ list.length || 0 }}</span>种品类。
            </p>
          </div>

          <div class="list">
            <div class="item" v-for="(item, index) in list" :key="index">
              <div class="index">{{ item.rank }}</div>
              <img :src="item.image" alt="" class="pic" />
              <div class="texts" @click="pushToDetails(item)">
                <p class="name">
                  包装材料-{{ item.store_name }}
                </p>
                <p class="quantity">共采购：{{ item.product_price || 0 }}元</p>
              </div>
            </div>
          </div>

          <m-pagination :pagination="list.length" />
        </div>

        <router-view  v-else/>
      </template>
    </menu-content-layout>
  </div>
</template>

<script>
import MenuContentLayout from "@/components/common/menu-content-layout/MenuContentLayout"
import MPagination from "@/components/common/m-pagination/MPagination"
import { getProList } from "@/request/api"

export default {
  name: "ExpenditureClassification",
  components: {
    MPagination,
    MenuContentLayout,
  },
  data() {
    return {
      list: [],
      day: "",
    };
  },
  created() {
    this.getList()
  },
  methods: {
    pushToDetails({ id }) {
      this.$router.push({
        path: "/profile/expenditure-management/expenditure-classification/details",
        query: { id }
      })
    },
    async getList() {
      const res = await getProList();
      try {
        this.list = res.data.list
        this.day = res.data.day
      }catch(err) {
        this.$message.error(err.message)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";

.expenditure-classification {
  .prompt {
    height: 80px;
    background-color: rgb(243, 244, 247);
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;

    p {
      .keyword {
        color: $theme-color-1;
        font-size: 32px;
        font-weight: bold;
        margin: 0 10px;
      }
    }
  }

  .list {
    margin-bottom: 40px;

    .item {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      font-size: 16px;

      &:nth-of-type(1) {
        .index {
          background-image: url("~@/assets/images/index-1.png");
        }
      }

      &:nth-of-type(2) {
        .index {
          background-image: url("~@/assets/images/index-2.png");
        }
      }

      &:nth-of-type(3) {
        .index {
          background-image: url("~@/assets/images/index-3.png");
        }
      }

      &:nth-of-type(1),
      &:nth-of-type(2),
      &:nth-of-type(3) {
        .index {
          color: #fff;
        }
      }

      .index,
      .pic,
      .texts {
        margin-right: 35px;
      }

      .index {
        width: 50px;
        height: 92px;
        font-size: 22px;
        text-align: center;
        line-height: 92px;
        background-repeat: no-repeat;
        background-position: center center;
      }

      .pic {
        width: 92px;
        height: 92px;
      }

      .texts {
        padding: 10px 0;
        cursor: pointer;

        .name {
          margin-bottom: 15px;
        }
      }
    }
  }
}
</style>
